<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Mobila banken</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <link rel="stylesheet" href="styles/my.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
        </script>
    </head>
    <body>
        <div data-role="page" id="overview">
            <div data-theme="" data-role="header" data-position="fixed">
                <h3>
                    Mobila Banken
                </h3>
                <a data-role="button" data-rel="back" data-transition="slide" href="#overview" data-icon="back" data-iconpos="bottom">
                </a>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="true" id="listview">
                    <li data-role="list-divider" role="heading">
                        Konton
                    </li>
                <!-- 
                    <li data-theme="c">
                        <a id="accountdetailsLink" href="#accountdetails" data-transition="slide" data-identity='123'>
                            Konto X
                        </a>
                    </li>
                -->
                </ul>
                <div>
                    <a href="#" data-transition="fade">
                        Visa fler konton
                    </a>
                </div>
            </div>
        </div>
        <div data-role="page" id="transactiondetails">
            <div data-theme="a" data-role="header">
                <h3>
                    Mobila Banken
                </h3>
                <a data-role="button" data-rel="back" data-transition="slide" href="#overview" data-icon="back" data-iconpos="bottom">
                </a>
            </div>
            <div data-role="content">
                <div>
                    <ul>
                        <li>
                            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua.&nbsp;
                        </li>
                        <li>
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                            ut aliquip ex ea commodo consequat.&nbsp;
                        </li>
                        <li>
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                            dolore eu fugiat nulla pariatur.&nbsp;
                        </li>
                        <li>
                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                            deserunt mollit anim id est laborum."&nbsp;
                            <br />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div data-role="page" id="accountdetails">
            <div data-theme="a" data-role="header">
                <h3>
                    Mobila Banken
                </h3>
                <a data-role="button" data-rel="back" data-transition="slide" href="#overview" data-icon="back" data-iconpos="bottom">
                </a>
            </div>
            <div data-role="content">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#accountdetails" data-theme="" data-icon="ui-btn-active" class="">
                                Transaktioner
                            </a>
                        </li>
                        <li>
                            <a href="#accountdetails" data-theme="" data-icon="">
                                Information
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="ui-grid-b" id="transactions" > <!-- hidden attribute should depend on which tab is chosen -->
                    <div class="ui-block-a">
                        <div>
                            <b>
                                12-04-25
                            </b>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div>
                            <a href="#transactiondetails" data-transition="fade">
                                Lön
                            </a>
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class="positive">
                            <b>
                                + 45000 SEK
                            </b>
                        </div>
                    </div>
                    <div class="ui-block-a">
                        <div>
                            <b>
                                12-04-23
                            </b>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div>
                            <a href="#transactiondetails" data-transition="fade">
                                Restaurangen
                            </a>
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class="negative">
                            <b>
                                - 1200 SEK
                            </b>
                        </div>
                    </div>
                    <div class="ui-block-a">
                        <div>
                            <b>
                                12-04-23
                            </b>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div>
                            <a href="#transactiondetails" data-transition="fade">
                                Systembolaget
                            </a>
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class="negative">
                            <b>
                                - 1500 SEK
                            </b>
                        </div>
                    </div>
                    <div class="ui-block-a">
                        <div>
                            <b>
                                12-04-15
                            </b>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div>
                            <a href="#transactiondetails" data-transition="fade">
                                Apple Store
                            </a>
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class="negative">
                            <b>
                                - 2 USD
                            </b>
                        </div>
                    </div>
                </div>
                <div id="details" hidden="true"> <!-- hidden attribute should depend on which tab is chosen -->
                    <b>
                        Information div and&nbsp;text or grid or whatever&nbsp;goes here
                        <script type="text/x-handlebars" data-template-name="accountdetailsContainer">
                        {{customerName}}
                        </script>
                    </b>
                </div>
            </div>
        </div>
        <script>

            var arrangementId;
            $("a[href=#accountdetails]").live(
                  "click", 
                  function() {
                     // save the id
                     arrangementId = $(this).data("identity");
                     //console.debug(selId);
                  });

            $("div#accountdetails").bind(
                  "pagebeforeshow", 
                  function() {
                    console.debug(arrangementId);
                    $.getJSON(
                        "http://localhost:9998/accounts/" + arrangementId + "?callback=?",
                        //"http://mobile-app-demo.herokuapp.com/accounts?callback=jsonCallback", 
                        function(data) {
                            console.debug(data);
                        });
                    //var person = getDataStructureFor(arrangementId);
                    // do something with person
                  }
            );



        
            //App custom javascript
            $.getJSON(
                "http://localhost:9998/accounts?callback=?", 
                //"http://mobile-app-demo.herokuapp.com/accounts?callback=jsonCallback", 
                function(data) {
                    console.debug(data.account);
                    for (var i = 0; i < data.accounts.length; i++) {
                    //console.debug(data.accounts[i]);
                    //console.debug(data.accounts[i]['arrangementId']);
                        $('#listview').append("<li data-theme=\"c\"><a id=\"accountdetailsLink\" href=\"#accountdetails\" data-transition=\"slide\" data-identity=\"" + data.accounts[i]['arrangementId'] + "\">"+ data.accounts[i]['customerArrangementName']+"</a></li>");
                        //self.addAccount(AccountOverview.Account.create(data.accounts[i]));
                    }
                }
            );

          


        </script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
        </script>
        <script src="js/ember-0.9.7.1.min.js"/>

        <script>
        /*
        AccountDetails = Em.Application.create({
          ready: function() {
          AccountDetails.searchResults.refresh();
          }
        });

        // Model
        AccountDetails.Account = Em.Object.extend();

        // Collection
        AccountDetails.searchResults = Em.ArrayController.create({
          content: [],

          addAccount: function(account) {
            this.pushObject(account);
            },
          
          
          refresh: function() {
            var self = this;
            $.getJSON(
                "http://localhost:9998/accounts/" + arrangementId + "?callback=?",
                //"http://mobile-app-demo.herokuapp.com/accounts?callback=jsonCallback", 
                function(data) {
                console.debug(data.accounts);
                    //console.debug(data[1]);
                    //console.debug(data[i]);
                        //self.addAccount(AccountDetails.Account.create(data.accounts[i]));
                }
            );
          }
        });
        */
        </script>
    </body>
</html>